<template>
  <div>
    <el-table
      ref="table"
      :data="tableData"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :style="{ width: '100%' }"
      empty-text="暂无数据"
      row-key="id"
      :height="Number(props.height)"
    >
      <el-table-column prop="name" label="菜单名称" width="180" align="left" />
      <el-table-column prop="description" label="描述" align="center" />
      <el-table-column prop="url" label="url地址" align="center" />
      <el-table-column
        prop="created_at"
        :formatter="formatterTiem"
        label="创建时间"
        align="center"
      />
      <el-table-column
        prop="updated_at"
        :formatter="formatterTiemUpdate"
        label="更新时间"
        align="center"
      />
      <el-table-column fixed="right" label="操作" width="220" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" @click="add(scope.row)">新增</el-button>
          <el-button size="small" v-if="scope.row.menu_id" @click="edit(scope.row)">编辑</el-button>
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            title="确定删除当前记录?"
            @confirm="deleteMenu(scope.row.id)"
            v-if="scope.row.menu_id"
          >
            <template #reference>
              <el-button size="small" v-if="scope.row.menu_id" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 菜单添加 -->
  <Dialog
    @close="closeMenuItem"
    :visible="menuItemVisible"
    width="80%"
    height="400px"
    title="菜单管理"
    @submit="submitMenuItem"
  >
    <addMenuItem ref="addFormMenuItemEl"></addMenuItem>
  </Dialog>
</template>

<script lang="ts" setup>
import { onMounted, defineExpose, ref, reactive, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import Dialog from '@/components/Dialog/Dialog.vue'
import addMenuItem from './addMenuItem.vue'
import {
  infoMainMenuChildren,
  addMainMenuItem,
  getMainMenuAll,
  deleteMainMenuChildren
} from '@/api'
import moment from 'moment'
const props = defineProps<{
  height: number | string
}>()
const tableData = ref([])
const menuItemVisible = ref(false)
let records = reactive<any>({})
const query = ref({
  name: ''
})
const addFormMenuItemEl = ref<InstanceType<typeof addMenuItem> | null>(null)
const formatterTiem = (row) => {
  return moment(row.created_at).format('YYYY-MM-DD HH:mm')
}
const formatterTiemUpdate = (row) => {
  return moment(row.updated_at).format('YYYY-MM-DD HH:mm')
}
const add = (record: any) => {
  records = record
  menuItemVisible.value = true
  nextTick(() => {
    addFormMenuItemEl.value?.addForm(records)
  })
}

const submitMenuItem = () => {
  if (addFormMenuItemEl.value) {
    addFormMenuItemEl.value.ruleFormRef?.validate((valid) => {
      if (valid) {
        const data: any = addFormMenuItemEl.value?.ruleForm
        console.log(data, 'data')
        addMainMenuItem(data).then((res: any) => {
          if (res?.code == 200) {
            menuItemVisible.value = false
            ElMessage({
              message: res.message,
              type: 'success'
            })
            getMenuAll()
          } else {
            ElMessage({
              message: res.message,
              type: 'error'
            })
          }
        })
      }
    })
  }
}

const getMenuAll = (data = {}) => {
  if (data) {
    query.value = {
      ...query.value,
      ...data
    }
  }
  getMainMenuAll(query.value).then((res: any) => {
    if (res.code == 200) {
      tableData.value = res.data
    }
  })
}

const closeMenuItem = () => {
  menuItemVisible.value = false
}
const edit = (record: any) => {
  records = record
  menuItemVisible.value = true
  nextTick(() => {
    getInfo(records.id)
  })
}
const getInfo = (id) => {
  infoMainMenuChildren({
    id
  }).then((res: any) => {
    if (res.code == 200) {
      addFormMenuItemEl.value!.setFormData(res.data)
    }
  })
}

const deleteMenu = (id: number) => {
  deleteMainMenuChildren({ id }).then((res: any) => {
    if (res.code == 200) {
      getMenuAll()
      ElMessage({
        message: res.message,
        type: 'success'
      })
    } else {
      ElMessage({
        message: res.message,
        type: 'error'
      })
    }
  })
}

const init = () => {
  getMenuAll()
}
onMounted(() => {
  init()
})
defineExpose({ getMenuAll })
</script>
